<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的</title>
		<meta name="viewport"
		   content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		  <script src="js/vue.min.js?v=21"></script>
		  <script src="js/jquery.min.js?v=21"></script>
		  <meta http-equiv="Pragma" content="no-cache" />
		  <meta http-equiv="Cache-Control" content="no-cache" />
		  <meta http-equiv="Expires" content="0" />
		  <!-- vantUi框架 -->
		  <link rel="stylesheet" type="text/css" href="vant-ui@2.11/index.css" />
		 
		  <script src="vant-ui@2.11/vant.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
		<style>
			.body{
				background-color: #EEEEEE;
			}
			.title-view{
				background-color: #00BCD4;
				text-align: center;
				padding: 10px 0;
				color: #FFFFFF;
			}
			.all{
				display: flex;
				flex-direction: column;
			}
			.all-top{
				display: flex;
				flex-direction: row;
				background-color: #00BCD4;
				width: 95%;
				height: 120px;
				margin-top: 10px;
				margin-left: 9px;
				border-radius: 5px;
			}
			.text-name{
				color: #FFFFFF;
				margin-top: 25px;
				font-size: 16px;
			}
			.img-view{
				margin-left: 10px;
				margin-top: 25px;
				width: 70px;
				height: 70px;
				border-radius: 50px;
			}
			.top-center{
				width:100px;
				margin-left: 15px;
			}
			.text-name-b{
				margin-top: 30px;
				font-size: 16px;
				color: yellow;
			}
			.tqyb{
				margin-left: 10px;
				margin-top: 15px;
				width: 50px;
				height: 50px;
			}
			.top-tqyb{
				flex: 1;
				display: flex;
				flex-direction: row-reverse;
			}
			.top-text{
				margin-right:5px;
				color: #FFFFFF;
			}
			.all-dd{
				display: flex;
				flex-direction: column;
				background-color: #FFFFFF;
				width: 95%;
				height: 120px;
				margin-top: 10px;
				margin-left: 9px;
				border-radius: 5px;
			}
			.dd-top{
				margin-top: 5px;
				display: flex;
				flex-direction: row;
			}
			.dd-text{
				margin-left: 10px;
				font-size: 12px;
			}
			.dd-text2{
				margin-right: 10px;
				color: #646566;
				font-size: 12px;
				display: flex;
				flex-direction: row-reverse;
				flex: 1;
			}
			.dd-bottom{
				padding-left: 13px;
				padding-right: 13px;
				display: flex;
				flex-direction:row;
			}
			.bottom-left{
				margin-top: 15px;
				display: flex;
				flex-direction: column;
			}
			.qianbao{
				width: 50px;
				height: 50px;
			}
			.bottom-text{
				margin-left: 7px;
				color: #000000;
				font-size: 12px;
			}
			.all-qb{
				display: flex;
				flex-direction: column;
				background-color: #FFFFFF;
				width: 95%;
				height: 140px;
				margin-top: 10px;
				margin-left: 9px;
				border-radius: 5px;
			}
			.bottom-text2{
				font-size: 10px;
			}
			.all-bottom{
				display: flex;
				flex-direction: column;
				background-color: #FFFFFF;
				width: 95%;
				height: 260px;
				margin-top: 10px;
				margin-left: 9px;
				border-radius: 5px;
				margin-bottom: 60px;
			}
			.b-t{
				margin-left: 15px;
				display: flex;
				flex-direction: row;
			}
			
		</style>
	<body class="body">
		<div id="root">
			<div class="title-view">我的</div>
			<div class="all">
				<div class="all-top">
					<img src="img/maomao.jpg" class="img-view"/>
					<div class="top-center">
						<div class="text-name">王小喵</div>
						<div class="text-name-b">V3</div>
					</div>
					<div class="top-tqyb">
						<div style="margin-top: 10px;">
							<img src="./img/tianqiq.png" class="tqyb">
							<div class="top-text">23℃~28℃</div>
						</div>
					</div>
				</div>
				<div class="all-dd">
					<div class="dd-top">
						<div class="dd-text">我的订单</div>
						<div class="dd-text2">查看全部订单></div>
					</div>
					<div class="dd-bottom">
						<div class="bottom-left">
							<img src="img/fukuan.png" class="qianbao">
							<div class="bottom-text">待付款</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/shioyng.png" class="qianbao">
							<div class="bottom-text">待付款</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/pingjia.png" class="qianbao">
							<div class="bottom-text">待付款</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/tuikuan.png" class="qianbao">
							<div class="bottom-text">待付款</div>
						</div>
					</div>
				</div>
				<div class="all-qb">
					<div class="dd-top">
						<div class="dd-text">我的钱包</div>
						<div class="dd-text2">余额，银行卡等></div>
					</div>
					<div class="dd-bottom">
						<div class="bottom-left">
							<img src="img/zhuxiao.png" class="qianbao">
							<div class="bottom-text">理财</div>
							<div class="bottom-text2" style="margin-top: 8px;">稳赚收益</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/naquhua.png" class="qianbao">
							<div class="bottom-text">拿去花</div>
							<div class="bottom-text2" style="margin-top: 8px;">先出后付</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/jieqian.png" class="qianbao">
							<div class="bottom-text">借去花</div>
							<div class="bottom-text2" style="margin-top: 8px;">最高20万</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/baijin.png" class="qianbao">
							<div class="bottom-text">白金卡</div>
							<div class="bottom-text2" style="margin-top: 8px;">最高50万</div>
						</div>
					</div>
				</div>
				<div class="all-bottom">
					<div class="b-t">
						<div class="bottom-left">
							<img src="img/libao.png" class="qianbao">
							<div class="bottom-text">新人礼包</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/gerenxinxi.png" class="qianbao">
							<div class="bottom-text">常用信息</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/fapiao.png" class="qianbao">
							<div class="bottom-text">我的发票</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/huiyuan.png" class="qianbao">
							<div class="bottom-text">我的会员</div>
						</div>
					</div>
					<div class="b-t">
						<div class="bottom-left">
							<img src="img/bijiahuodong.png" class="qianbao">
							<div class="bottom-text">比价活动</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/dianping.png" class="qianbao">
							<div class="bottom-text">我的点评</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/jiankangma.png" class="qianbao">
							<div class="bottom-text">健康码</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/xinyong.png" class="qianbao">
							<div class="bottom-text">我的信用</div>
						</div>
					</div>
					<div class="b-t">
						<div class="bottom-left">
							<img src="img/zhuxiao.png" class="qianbao">
							<div class="bottom-text">注销</div>
						</div>
						<div class="bottom-left" style="margin-left: 45px;">
							<img src="img/gerenziliao.png" class="qianbao">
							<div class="bottom-text">个人资料</div>
						</div>
					</div>
				</div>
			</div>
			<van-tabbar v-model="active" @change="onChange">
			  <van-tabbar-item>
			    <span>首页</span>
			    <template #icon="props">
			      <img src="img/home_n.png">
			    </template>
			  </van-tabbar-item>
			  <van-tabbar-item icon="search">行程</van-tabbar-item>
			  <van-tabbar-item icon="setting-o">热点</van-tabbar-item>
			  <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
			</van-tabbar>
		</div>
		<script>
			new Vue({
				el:"#root",
				data(){
					return{
						active:3,
					}
				},
				methods: {
					onChange(index){
						console.log('当前点击了第'+index+'个')
						if(index == 0){
							window.location.replace('mainshape.html')
						}else if(index == 1){
							window.location.replace('xingcheng.html')
						}else if(index == 2){
							window.location.replace('redian.html')
						}else if(index == 3){
							window.location.replace('wode.html')
						}
					},
					},
				mounted(){
					
				}
			})
		</script>
	</body>
</html>
